<template>
	<view>
		<!-- 头部 -->
		<view class="mainpadding header">
			<view class="nostrongtext">根据《互联网论坛社区服务管理规定》要求，用户须完成身份认证后，才能发布信息</view>
		</view>
		<view :class="flag?'neirong':''">
			<!--输入框 内容 -->
			<view class="mainpadding">
				<view class="xiahuaxian flexbetween">
					<view class="notitletext">姓名</view>
					<input class="inputs" type="text" placeholder="您的姓名" v-model="name" :disabled="!flag">
				</view>
				<view class="xiahuaxian flexbetween margin_top">
					<view class="notitletext">学号</view>
					<input class="inputs" type="text" placeholder="您的学号" v-model="studynum" :disabled="!flag">
				</view>
				<view class="xiahuaxian flexbetween margin_top">
					<view class="notitletext">院系</view>
					<input class="inputs" type="text" placeholder="选择院系" v-model="xueyuan" :disabled="!flag">
				</view>
				<view class="xiahuaxian flexbetween margin_top" @click="pickershow">
					<view class="notitletext">校园身份</view>
					<input class="inputs" type="text" placeholder="选择校园身份" v-model="shenfen" disabled>
				</view>
				<u-picker :show="dshow" :columns="dcolumns" @confirm="dconfirm" title="选择校园身份"  @cancel="dshow=false"></u-picker>
				<view class="xiahuaxian flexbetween margin_top" @click="nshow = true">
					<view class="notitletext">入学年份</view>
					<input class="inputs" type="text" placeholder="请输入入学年份" v-model="nianfen" disabled>
				</view>
				<!-- <u-picker :show="nshow" :columns="ncolumns" @confirm="nconfirm" title="选择入学年份"  @cancel="nshow=false"></u-picker> -->
				<u-datetime-picker @cancel="nshow = false" :show="nshow" v-model="value1" mode="year-month" @confirm="nconfirm"></u-datetime-picker>
				<view class="xiahuaxian flexbetween margin_top">
					<view class="notitletext">个性签名</view>
					<input class="inputs" type="text" placeholder="选填" v-model="qianming" :disabled="!flag">
				</view>
				<view class="xiahuaxian flexbetween margin_top">
					<view class="notitletext">手机号</view>
					<input class="inputs" type="text" placeholder="请输入手机号" v-model="mobile" :disabled="!flag">
				</view>
				<view class="xiahuaxian flexbetween margin_top">
					<view class="notitletext">QQ号</view>
					<input class="inputs" type="text" placeholder="选择QQ号" v-model="qq" :disabled="!flag">
				</view>
				<view class="xiahuaxian flexbetween margin_top">
					<view class="notitletext">微信号</view>
					<input class="inputs" type="text" placeholder="请输入微信号" v-model="wx" :disabled="!flag">
				</view>
			</view>
			<!-- 上传图片 -->
			<view class="mainpadding">
				<view class="hongsetext">
					1.请上传清晰的学生卡（证)信息页，包含清晰的学号、
					姓名。新生可使用录取通知书临时认证。
					2.请勿冒用他人证件，一个证件只能认证一个账号。
				</view>
				<view class="sczjz">
					<view class="tupianbox flexcenter margin_top" v-show="upImg">
						<view class="tupian radius">
							<image class="radius upimage" :src="upImg" mode=""></image>
							<image class="shanchu" v-show="flag" src="../../static/image/system/shanchu.png" mode="" @click="delimg"></image>
						</view>
					</view>
					<view class="zhengjianz margin_top" @click="uploadImg" v-show="!upImg">
						<image src="../../static/image/system/sstp.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="dibuboxs" v-show="flag">
			<view class="flexcenter ">
				<view :class="quan?'xiaotutu margin_right1':'lanyuan margin_right1'" @click="xiaoshi"></view>
			    <view class="huisetext">
			    	我已阅读并同意<text @click="tzjsys">《集市协议》</text>与<text @click="tzysgf">《隐私政策》</text>
			    </view>
			</view>
			<view class="dibubtn margin_top2" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				quan: false,
				upImg:"",
				name:"",
				studynum:"",
				xueyuan:"",
				shenfen:"",
				qianming:"",
				nianfen:"",
				mobile:"",
				qq:"",
				wx:"",
				dshow:false,
				dcolumns: [['专科生','本科生','硕士生','博士生','教职工',]],
				flag:true,
				nshow:false,
				value1: Number(new Date()),
			}
		},
		onLoad() {
			this.getinfo()
		},
		methods: {
			date(timer) {				var date = new Date(timer); //当前时间				var year = date.getFullYear() //返回指定日期的年份				var month = repair(date.getMonth() + 1); //月				var day = repair(date.getDate()); //日				var curTime = year + "-" + month				function repair(i) {				  if (i >= 0 && i <= 9) {					return "0" + i;				  } else {					return i;				  }				}				return curTime			  },
			//个人信息
			getinfo() {
				httpRequest.request('user/index', 'POST', {}, false, false, true).then(res => {
					let data = res.data.userinfo.certification
					// this.wodelibiao = res.data
					this.name = data.username
					this.studynum = data.student_no
					this.xueyuan = data.departments
					this.shenfen = data.school_identify
					this.qianming = data.bio
					this.nianfen = data.enter_year
					this.mobile = data.mobile
					this.qq = data.qq
					this.wx = data.weixin
					this.upImg = data.images
					if(res.data.userinfo.certification.state==3){
						this.flag = true
					}else{
						this.flag = false
					}
				})
			},
			
			pickershow(){
				this.dshow = true
			},
			pickernianfen(){
				this.nshow = true
			},
			dconfirm(e){
				console.log(e)
				this.dshow = false
				this.shenfen = e.value[0]
			},
			nconfirm(e){
				console.log(e)
				this.nshow = false
				this.nianfen = this.date(e.value)
				console.log(this.nianfen)
			},
			//跳转隐私政策
			tzysgf(){
				uni.navigateTo({
					url:'/pages/wode/yinsizc'
				})
			},
			//跳转集市协议
			tzjsys(){
				uni.navigateTo({
					url:'/pages/wode/jishixy'
				})
			},
			xiaoshi() {
				this.quan = !this.quan
			},
			uploadImg() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									console.log(res[i])
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			// 详情转载
			uploadImageService(url) {
				let _this = this;
				httpRequest.uploadFile('common/upload', url).then(res => {
					let image_item = res.fullurl;
					this.upImg = image_item
				}).catch(err => {});
			},
			delimg(){
				this.upImg = ""
			},
			submit(){
				if(this.name == ''){
					httpRequest.toast('请输入姓名')
					return false
				}
				if(this.studynum == ''){
					httpRequest.toast('请输入学号')
					return false
				}
				if(this.xueyuan == ''){
					httpRequest.toast('请输入院系')
					return false
				}
				if(this.shenfen == ''){
					httpRequest.toast('请输入校园身份')
					return false
				}
				if(this.nianfen == ''){
					httpRequest.toast('请输入入学年份')
					return false
				}
				if(this.qianming == ''){
					httpRequest.toast('请输入个性签名')
					return false
				}
				if(this.mobile == ''){
					httpRequest.toast('请输入手机号')
					return false
				}
				if(this.images == ''){
					httpRequest.toast('请上传学生卡照片')
					return false
				}
				httpRequest.request('user/certification', 'POST', {
					username:this.name,
					student_no:this.studynum,
					departments:this.xueyuan,
					school_identify:this.shenfen,
					enter_year:this.nianfen,
					bio:this.qianming,
					mobile:this.mobile,
					qq:this.qq,
					weixin:this.wx,
					images:this.upImg
				}, false, false, true).then(res => {
					console.log(res)
					if(res.code == 1){
						httpRequest.toast('提交成功');
						uni.setStorage({
							key:'user',
							data:{
								phone:this.mobile,
								qq:this.qq,
								weixin:this.wx,
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sczjz{
		padding-bottom: 60rpx;
	}
	.huisetext{
		font-size: 30rpx;
		font-family: MicrosoftYaHei-, MicrosoftYaHei;
		font-weight: normal;
		color: #999999;
		text{
			color: #2acc9c;
		}
	}
	.xiaotutu {
		width: 33rpx;
		height: 33rpx;
		background-size: 100% 100%;
		background-image: url('@/static/image/system/zhengque.png');
	}

	.lanyuan {
		width: 29rpx;
		height: 29rpx;
		border-radius: 50%;
		border: 2rpx solid #2ACC9C;
	}

	.neirong {
		padding-bottom: 230rpx;
	}

	.zhengjianz {
		width: 100%;
		height: 290rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.shangchuan {
		width: 175rpx;
		height: 183rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.shanchu {
		width: 31rpx;
		height: 30rpx;
		position: absolute;
		left: 48%;
		bottom: -6%;
	}

	.tupianbox {
		width: 100%;
	}

	.tupian {
		position: relative;
		width: 100%;
		height: 290rpx;

		.upimage {
			width: 100%;
			height: 100%;
		}
	}

	.hongsetext {
		font-size: 30rpx;
		font-family: MicrosoftYaHei-, MicrosoftYaHei;
		font-weight: normal;
		color: #FF6E6E;
	}

	.inputs {
		width: 69%;
	}

	.xiahuaxian {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #EBEBEB;
	}

	.header {
		line-height: 36rpx;
		background: rgba(56, 208, 163, .2);
		box-shadow: 0rpx -5rpx 5rpx 1rpx rgba(0, 0, 0, 0.03);
	}
</style>
